<template>
  <div class="mine-tools">
    <div class="title" text-sm font-medium indent-2>推广卖货</div>
    <div flex flex-wrap>
      <div class="entry-item" @click="$navigateTo(tool.url)" v-for="(tool, index) in toolsList" :key="index">
        <image class="entry-item-icon" :src="tool.icon" />
        <div class="entry-item-label">{{ tool.label }}</div>
      </div>
    </div>
  </div>
</template>


<script setup lang="ts">
const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
interface ToolRule {
  label: string,
  icon: string,
  url: string
}

const toolsList = ref<Array<ToolRule>>([
  {
    label: "分销商品",
    icon: "/static/tabbar/point-mall.png",
    url: "/pages/mine/distribution/goods"
  },
  {
    label: "分销订单",
    icon: "/static/mine/shensu.png",
    url: "/pages/mine/distribution/order"
  },
  {
    label: "分销业绩",
    icon: "/static/mine/feedback.png",
    url: "/pages/mine/distribution/performance"
  },
  {
    label: "提现记录",
    icon: "/static/mine/refund.png",
    url: "/pages/mine/distribution/history?type=1"
  },
  {
    label: "提现",
    icon: "/static/mine/mypoint.png",
    url: "/pages/mine/distribution/withdrawal"
  },
  {
    label: "我的客户",
    icon: "/static/tabbar/mine.png",
    url: "/pages/mine/distribution/client"
  },
  {
    label: "我的团队",
    icon: "/static/tabbar/home.png",
    url: "/pages/mine/distribution/team"
  },
  {
    label: "推荐码",
    icon: "/static/mine/distribution.png",
    url: "/pages/mine/distribution/referral-code"
  },
])

watch(() => props.data, () => {
  // 分销商品链接
  toolsList.value[0].url = `/pages/mine/distribution/goods?id=${props.data.id}&name=${props.data.memberName}`;
  toolsList.value[7].url = `/pages/mine/distribution/referral-code?id=${props.data.id}`;
})
</script>

<style scoped lang="scss">
.mine-tools {
  background: #fff;
  box-shadow: 6rpx 10rpx 24rpx rgba(126, 126, 126, 0.1);
  margin: 20rpx 0;
  border-radius: 24rpx;
  padding: 32rpx 16rpx;
  flex-wrap: wrap;
}

.entry-item {
  gap: 0rpx 20rpx;
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 170rpx;

  >.entry-item-icon {
    width: 50rpx;
    height: 50rpx;
    margin-bottom: 20rpx;

  }

  >.entry-item-label {
    font-size: 24rpx;
  }
}
</style>
